import type { RadioChangeEvent } from "antd";
import { Checkbox, Radio, Space } from "antd";
import { Switch } from "antd-mobile";
import { useEffect, useState } from "react";
import request from "umi-request";
import "./style/index.css";
type Props = {};
const response = await request.get("/api/users");
const UserClassification = (props: Props) => {
  const [value, setValue] = useState(1);
  const [value1, setValue1] = useState(1);
  const [value2, setValue2] = useState(1);
  const [value3, setValue3] = useState(1);
  const [value4, setValue4] = useState(1);
  const [value5, setValue5] = useState(1);
  const [arr, setarr] = useState([
    {
      checked: false,
      id: "1",
      name: "普通会员",
      ershou: "是",
      chuzu: "是",
      chushou: "是",
      chuzu1: "是",
      shangpu: "是",
      shangzu: "是",
      nianfei: 0,
      dengji: 1,
    },
  ]);
  const [kg, setkg] = useState(false);
  const [pkg, setpkg] = useState(false);
  ///全选
  function inputc(e: any) {
    setkg(e.target.checked);
    let brr = [...arr];
    brr.forEach((item) => {
      return (item.checked = e.target.checked);
    });
    setarr(brr);
  }
  //反选
  function yfaBdbawi(item: any) {
    let brr = [...arr];
    for (let i = 0; i < arr.length; i++) {
      if (brr[i].id == item.id) {
        item.checked = !item.checked;
      }
    }
    setarr(brr);
    let kgMc = brr.every((item) => {
      return item.checked;
    });
    setkg(kgMc);
  }
  //删除
  function delect(index: number) {
    let brr = [...arr];
    brr.splice(index, 1);
    setarr(brr);
  }
  //下全选取消
  const Checkboxs = (e: any) => {
    setkg(e.target.checked);
    let brr = [...arr];
    brr.forEach((item) => {
      return (item.checked = e.target.checked);
    });
    setarr(brr);
  };
  //选中删除
  function shanchu() {
    let brr = [...arr];
    let crr: any = [];
    brr.forEach((item, index) => {
      if (item.checked === false) {
        crr.push(item);
      }
    });
    setarr(crr);
    setkg(false);
  }
  //赋值
  function hudiwqahiu(e: any) {
    let brr = [...arr];
    brr.forEach((item: any, index) => {
      if (item == e) {
        item.checkedtwo = !item.checkedtwo;
      }
    });
    setarr(brr);
  }
  //添加
  function fhiwa() {
    setpkg(true);
  }
  function upList() {
    let brr = [...arr];
    brr.push(brr[0]);
    setarr(brr);
    setpkg(false);
  }
  //开关
  function closes() {
    setpkg(false);
  }
  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };
  const onChange1 = (e: RadioChangeEvent) => {
    setValue1(e.target.value);
  };
  const onChange2 = (e: RadioChangeEvent) => {
    setValue2(e.target.value);
  };
  const onChange3 = (e: RadioChangeEvent) => {
    setValue3(e.target.value);
  };
  const onChange4 = (e: RadioChangeEvent) => {
    setValue4(e.target.value);
  };
  const onChange5 = (e: RadioChangeEvent) => {
    setValue5(e.target.value);
  };
  useEffect(() => {
    setarr(response);
  }, []);

  return (
    <div className="klockw123">
      <div className="bgfhgdf">
        <div>
          <button onClick={fhiwa}>添加用户分类</button>
        </div>
        <div className="jafuda">
          <table cellSpacing={0} style={{ textAlign: "center" }}>
            <thead>
              <tr>
                <td rowSpan={2}>
                  <input type="checkbox" checked={kg} onChange={inputc} />
                </td>
                <td rowSpan={2}>ID</td>
                <td rowSpan={2}>分类名称</td>
                <td colSpan={6}>审核</td>
                <td rowSpan={2}>年费(元/年)</td>
                <td rowSpan={2}>等级</td>
                <td rowSpan={2} style={{ width: "10vw" }}>
                  状态
                </td>
                <td rowSpan={2}>操作</td>
              </tr>
              <tr>
                <td>二手房</td>
                <td>出租房</td>
                <td>写字楼出售</td>
                <td>写字楼出租</td>
                <td>商铺出售</td>
                <td>商铺出租</td>
              </tr>
            </thead>
            <tbody>
              {/* 渲染 */}
              {arr
                ? arr.map((item: any, index: number) => {
                    return (
                      <tr key={index} style={{ textAlign: "center" }}>
                        <td>
                          <input
                            type="checkbox"
                            checked={item.checked}
                            onChange={() => yfaBdbawi(item)}
                          />
                        </td>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.ershou}</td>
                        <td>{item.chuzu}</td>
                        <td>{item.chushou}</td>
                        <td>{item.chuzu1}</td>
                        <td>{item.shangpu}</td>
                        <td>{item.shangzu}</td>
                        <td>{item.nianfei}</td>
                        <td>{item.dengji}</td>
                        <td>
                          <Space direction="vertical">
                            <Switch
                              checked={item.checkedtwo}
                              onChange={() => hudiwqahiu(item)}
                              uncheckedText="禁用"
                              checkedText="正常"
                              style={{
                                "--checked-color": "#00b578",
                                "--height": "20px",
                                "--width": "50px",
                              }}
                            />
                          </Space>
                        </td>
                        <td>
                          <button onClick={fhiwa}>编辑</button>
                          <button onClick={() => delect(index)}>删除</button>
                        </td>
                      </tr>
                    );
                  })
                : ""}
            </tbody>
          </table>
        </div>
        <div className="CommunityFoot">
          <div className="CommunityFootA">
            <p>
              <Checkbox onChange={Checkboxs} checked={kg}>
                全选/取消
              </Checkbox>
            </p>
            <button onClick={shanchu}>删除</button>
          </div>
        </div>
      </div>
      <div
        className="showtost"
        style={{ width: pkg ? "90vw" : "0", height: "100vh" }}
      >
        <div className="hvhsuei">
          添加用户分类{" "}
          <span
            style={{ float: "right", marginRight: "5vw", cursor: "pointer" }}
            onClick={closes}
          >
            X
          </span>
        </div>
        <p>
          <span>
            <span style={{ color: "red" }}>*</span>分类名称{" "}
          </span>
          <input type="text" placeholder="普通会员" />
        </p>
        <p>
          <span>每天免费发布</span> <input type="text" placeholder="0" />
          条/天0为不限制。
        </p>
        <p>
          <span>共免费发布</span> <input type="text" placeholder="0" />
          条0为不限制。
        </p>
        <p>
          <span>年费</span> <input type="text" placeholder="0" />
          元/年0为不收取年费。
        </p>
        <p>
          <span>超出收费</span> <input type="text" placeholder="0" />
          元/条 0为不收费，年费用户设置为0,设置为-1表 示超出限制后不可发布。
        </p>
        <p>
          <span>置顶</span> <input type="text" placeholder="0" />
          条/天0为不限制。
        </p>
        <main>
          <div>
            <p>开启注册</p>
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>开启</Radio>
              <Radio value={2}>关闭</Radio>
            </Radio.Group>
          </div>
          <div>
            <p>注册发送短信</p>
            <Radio.Group onChange={onChange1} value={value1}>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>
          </div>
          <div>
            <p>预约报名发送短信</p>
            <Radio.Group onChange={onChange2} value={value2}>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>
          </div>
          <div>
            <p>评论经纪人是否审核</p>
            <Radio.Group onChange={onChange3} value={value3}>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>
          </div>
          <div>
            <p>提交问题是否需要审核</p>
            <Radio.Group onChange={onChange4} value={value4}>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>
          </div>
          <div>
            <p>回答问题是否需要审核</p>
            <Radio.Group onChange={onChange5} value={value5}>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>
          </div>
          <div>
            <button className="hiufawh" onClick={upList}>
              立即提交
            </button>
          </div>
        </main>
      </div>
    </div>
  );
};

export default UserClassification;
